<template>
	<scroll-view class="page-scroll-wrapper" scroll-y="true" @scroll="handleScroll">
		<view class="page-container">
			<view class="header" :class="{ 'header-sticky': isHeaderSticky }"
				:style="{background: isScroll ? '#fff' : 'linear-gradient(to bottom, #FFE397, #fff)'}">
				<view class="header-top">
					<view class="header-top-left">
						<u-icon name="arrow-left" color="#000" size="27" @click="onBack()"></u-icon>
					</view>
					<view class="header-top-center">
						任务中心
					</view>
					<view class="header-top-right" @click="handleNavBar">
						<image src="/static/index/checkin/checkinNavBarIcon.png" mode=""></image>
					</view>
				</view>
				<view class="topicBox" v-show="!isScroll">
					<image src="@/static/local-circles/topic.png" mode=""></image>
				</view>
				<view class="middle-search">
					<view class="u-demo-block__content">
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="搜索本地热门话题" shape="circle" style="border: 1px solid #EEB513;"
							border="1px solid #EEB513">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="搜索本地热门话题" shape="circle" style="border: 1px solid #EEB513;" border>
							<!-- #endif -->
								<template slot="prefix">
									<view class="search-input-prefix">
										<view class="search-input-prefix-address">
											淮安市
										</view>
										<view class="search-input-prefix-icon">
											<u-icon name="arrow-down-fill" color="#000" size="13"></u-icon>
										</view>
									</view>
								</template>
								<template slot="suffix">
									<u-icon name="search" color="#4D4D56" size="27"></u-icon>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>



			<!-- 本地话题榜 -->
			<!-- <view class="LocalTopicList">
				<view class="LocalTopicList-left">
					<view class="LocalTopicList-left-title">
						<view class="" @click="handleToLocalTopicList">
							本地话题榜
						</view>
						<u-icon name="arrow-right" color="#000" size="30rpx" bold></u-icon>
					</view>
					<view class="LocalTopicList-left-content">
						发现同城趣事
					</view>
				</view>

				<view class="LocalTopicList-right">
					<view class="LocalTopicList-right-row" v-for="(item,index) in topTitleList" :key="index"
						@click="navigateToHotDetail(item)">
						<image src="@/static/local-circles/star.png" v-if="index < 4" mode="aspectFill"></image>
						<view class="LocalTopicList-right-row-content" v-if="index < 4">
							{{item.topicsTitle}}
						</view>
					</view>
				</view>

				<view class="wave">

				</view>
			</view> -->
			<!-- 街头热议Street-discussion.png -->
			<view class="Street-discussion">
				<!-- <view class="Street-discussion-header">
					<view class="Street-discussion-header-imageBox">
						<image src="/static/local-circles/Street-discussion.png" mode=""></image>
					</view>
					<view class="Street-discussion-header-title">
						街头热议
					</view>
				</view> -->
				<view class="Street-discussion-content">
					<u-scroll-list indicatorActiveColor="#FFAA0C">
						<view class="Street-discussion-content-imgBox" v-for="(item, index) in StreetDiscussionList"
							:key="index">
							<view class="image-wrapper">
								<image :src="item.imgUrl" mode="aspectFill"></image>
								<view class="Street-discussion-content-imgTitle">
									{{item.title}}
								</view>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>

			<!-- 探索本地圈 -->
			<view class="Explore-local-community-header" :class="{ 'explore-sticky': isExploreSticky }">
				<view class="Explore-local-community-header-left">
					<view class="Explore-local-community-header-imageBox">
						<image src="/static/local-circles/Participate-topic.png" mode=""></image>
					</view>
					<view class="Explore-local-community-header-title">
						街头热议
					</view>
				</view>
				<view class="Explore-local-community-header-right">
					<view class="switch-container">
						<view class="switch-option" :class="{ 'active': isNewDesc == 2 }" @click="handleSwitch(2)">
							推荐
						</view>
						<view class="switch-option" :class="{ 'active': isNewDesc == 0 }" @click="handleSwitch(0)">
							最新
						</view>
						<view class="switch-option" :class="{ 'active': isNewDesc == 1 }" @click="handleSwitch(1)">
							最热
						</view>
						<view class="switch-slider" :class="{ 
				      'slide-center': isNewDesc == 0, 
				      'slide-right': isNewDesc == 1,
				      'slide-left': isNewDesc == 2
				    }"></view>
					</view>
				</view>
			</view>


			<view class="Explore-local-community">
				<view class="Explore-local-community-list" v-for="(item,index) in hotList" :key="index"
					@click="handleToDetail(item)">
					<view class="Explore-local-community-list-content">
						<view class="Explore-local-community-list-content-top">
							<view class="Explore-local-community-list-content-top-left">
								<view class="Explore-local-community-list-content-top-left-img">
									<u-avatar :src="item.avatar" shape="circle" size="25"></u-avatar>
								</view>
								<view class="Explore-local-community-list-content-top-left-name">
									{{item.nickName}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-top-right">
								<view class="Explore-local-community-list-content-top-right-left">
									{{item.viewCount?item.viewCount+'万浏览':''}}
								</view>
								<view class="Explore-local-community-list-content-top-right-right">
									{{item.commentCount?item.commentCount+'评论':''}}
								</view>
							</view>
						</view>
						<view class="Explore-local-community-list-content-middle">
							<view class="Explore-local-community-list-content-middle-left">
								<view class="Explore-local-community-list-content-middle-left-h1">
									{{item.title}}
								</view>
								<view class="Explore-local-community-list-content-middle-left-h2">
									{{item.content}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-middle-right">
								<image :src="item.files.length>0 ? item.files[0].fileUrl:''" mode="scaleToFill">
								</image>
							</view>
						</view>
						<view class="Explore-local-community-list-content-bottom" v-if="false">
							<view class="Explore-local-community-list-content-bottom-left">
								<view class="Explore-local-community-list-content-bottom-left-first">
									<image src="/static/local-circles/Vector-60.png" mode=""></image>
								</view>
								<view class="Explore-local-community-list-content-bottom-left-second">
									<view class="Explore-local-community-list-content-bottom-left-second-left">
										来自
									</view>
									<view class="Explore-local-community-list-content-bottom-left-second-right">
										话题
									</view>
								</view>
								<view class="Explore-local-community-list-content-bottom-left-third">
									{{item.clientTopicsLists.topicsTitle}}
								</view>
							</view>
							<view class="Explore-local-community-list-content-bottom-right">
								<view class="onlookers">
									<image src="/static/local-circles/onlookers.png" mode=""></image>
								</view>
								<view class="">
									去围观
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="waterfallLoadStatus" />
				<view class="" style="height: 20rpx;">

				</view>
			</view>

		</view>
	</scroll-view>

</template>

<script>
	import {
		getPosts,
		topicsList
	} from '@/request/api.js';
	export default {
		data() {
			return {
				topTitleList: [],
				StreetDiscussionList: [{
						imgUrl: '/static/local-circles/1.png',
						title: '淮安人究竟有几款方言'
					},
					{
						imgUrl: '/static/local-circles/2.png',
						title: '淮安面条哪家最正宗'
					},
					{
						imgUrl: '/static/local-circles/3.png',
						title: '河下古镇究竟有多好玩'
					},
					{
						imgUrl: '/static/local-circles/1.png',
						title: '淮安人究竟有几款方言'
					},
					{
						imgUrl: '/static/local-circles/2.png',
						title: '淮安面条哪家最正宗'
					},
					{
						imgUrl: '/static/local-circles/3.png',
						title: '河下古镇究竟有多好玩'
					},

					{
						imgUrl: '/static/local-circles/1.png',
						title: '淮安人究竟有几款方言'
					},
					{
						imgUrl: '/static/local-circles/2.png',
						title: '淮安面条哪家最正宗'
					},
					{
						imgUrl: '/static/local-circles/3.png',
						title: '河下古镇究竟有多好玩'
					}
				],
				hotList: [],
				waterfallPage: 1,
				waterfallPageSize: 8,
				isWaterfallLoading: false,
				waterfallLoadStatus: 'loadmore',
				isNewDesc: 0, //探索本地圈  0最新 1 最热
				isHeaderSticky: true,
				isExploreSticky: false,
				exploreStickyThreshold: 190, // 探索本地圈吸顶触发阈值
				isScroll: false
			};
		},
		onLoad() {
			this.loadPosts(true);
			this.getTopList()
		},
		onReachBottom() {
			this.loadPosts(false);
		},
		methods: {
			// 处理滚动事件
			handleScroll(e) {
				console.log('Scroll event:', e.detail.scrollTop);
				const scrollTop = e.detail.scrollTop;
				this.isScroll = e.detail.scrollTop > 0
				// 控制探索本地圈吸顶
				this.isExploreSticky = scrollTop > this.exploreStickyThreshold;
			},
			// 点击列表内容进入详情页
			handleToDetail(item) {
				uni.navigateTo({
					// 跳转到新创建的页面
					url: '/pages_sub/index/local-circles-detail/local-circles-detail',
					success: (res) => {
						// 通过 eventChannel 向新页面传递数据
						res.eventChannel.emit('acceptDataFromCirclePage', {
							item: item
						});
					},
					fail: (err) => {
						console.error("跳转失败:", err);
					}
				});
			},
			async getTopList() {
				const params = {
					pageNum: 1,
					pageSize: 5,
				}
				try {
					const res = await topicsList(params);
					if (res.data && res.data.code === 200) {
						this.topTitleList = res.data.rows
					}
				} catch (error) {
					// console.error('加载帖子失败:', error);
				} finally {

				}
			},
			async loadPosts(isRefresh = false) {
				if (this.isWaterfallLoading || (!isRefresh && this.waterfallLoadStatus === 'nomore')) return;
				this.isWaterfallLoading = true;
				this.waterfallLoadStatus = 'loading';

				if (isRefresh) {
					this.waterfallPage = 1;
					this.hotList = []; // 修复：应该是 hotList 而不是 leftList 和 rightList
				}

				const params = {
					userId: this.$store.state.userInfo.userId,
					queryType: 1,
					categoryId: 4,
					pageNum: this.waterfallPage,
					pageSize: this.waterfallPageSize,
					isNewDesc: this.isNewDesc
				};

				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						// 修复：正确处理返回的数据
						const newPosts = res.data.rows || [];

						if (isRefresh) {
							this.hotList = newPosts;
						} else {
							this.hotList = [...this.hotList, ...newPosts];
						}

						// 修复：正确判断是否还有更多数据
						const hasMore = newPosts.length === this.waterfallPageSize;
						this.waterfallLoadStatus = hasMore ? 'loadmore' : 'nomore';

						// 修复：只有在还有更多数据时才增加页码
						if (hasMore) {
							this.waterfallPage++;
						}
					} else {
						this.waterfallLoadStatus = 'loadmore';
					}
				} catch (error) {
					console.error('加载帖子失败:', error);
					this.waterfallLoadStatus = 'loadmore';
				} finally {
					this.isWaterfallLoading = false;
				}
			},
			onBack() {
				uni.navigateBack();
			},
			// 蜂蜜中心
			handleNavBar() {

			},

			handleSwitch(val) {
				this.isNewDesc = val;
				this.loadPosts(true);
				// 这里可以添加切换后的业务逻辑
			},
			// 点击本地话题榜跳转到话题风向标
			handleToLocalTopicList() {
				uni.navigateTo({
					url: '/pages_sub/index/featured/local-topicList'
				})
			},
			navigateToHotDetail(item) {
				uni.navigateTo({
					// 跳转到新创建的页面
					url: '/pages_sub/index/local-circles-hot-detail/local-circles-hot-detail',
					success: (res) => {
						// 通过 eventChannel 向新页面传递数据
						res.eventChannel.emit('acceptDataFromCirclePage', {
							item: item
						});
					},
					fail: (err) => {
						console.error("跳转失败:", err);
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-scroll-wrapper {
		height: 100vh;
		width: 100%;
	}

	.page-container {
		// 原有样式保持不变
		background-color: #fff;
		min-height: 100vh;
		height: auto;
		// 移除 overflow-y 属性
		-webkit-overflow-scrolling: touch;
		position: relative;

		.header {
			background: linear-gradient(to bottom, #FFE397, #fff);
			height: 160rpx;
			padding-top: 84rpx;
			padding-bottom: 20rpx;

			&.header-sticky {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				z-index: 999;
			}

			.header-top {
				margin: 0 27rpx;
				display: flex;
				justify-content: space-between;

				.header-top-left {
					height: 56rpx;
					display: flex;

					.header-top-left-image {
						width: 44rpx;
						height: 44rpx;
					}

					.header-top-left-titleImage {
						margin-left: 10rpx;
						width: 200rpx;
						height: 56rpx;
					}
				}

				.header-top-right {
					image {
						width: 74rpx;
						height: 62rpx;
					}
				}
			}

			.topicBox {
				width: 222rpx;
				height: 222rpx;
				position: absolute;
				top: 52rpx;
				right: 80rpx;
				z-index: 1;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.middle-search {
				margin: 20rpx 27rpx 20rpx 27rpx;

				.search-input-prefix {
					display: flex;

					.search-input-prefix-address {
						font-size: 30rpx;
						font-weight: 400;
					}

					.search-input-prefix-icon {
						margin: 7rpx 10rpx;
					}
				}
			}


		}



		.LocalTopicList {
			margin-top: 300rpx;
			height: 346rpx;
			background-image: url("/static/local-circles/bear.png");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: relative;

			.wave {
				width: 137rpx;
				height: 11rpx;
				background-image: url("/static/local-circles/wave.png");
				position: absolute;
				bottom: 86rpx;
				left: 66rpx;
			}

			.LocalTopicList-left {
				width: 194rpx;
				height: 84rpx;
				position: absolute;
				bottom: 62rpx;
				left: 60rpx;

				.LocalTopicList-left-title {
					display: flex;
					font-size: 30rpx;
					font-weight: 900;
					color: #000;
				}

				.LocalTopicList-left-content {
					font-size: 24rpx;
					font-weight: 500;
					color: #787882;
				}
			}

			.LocalTopicList-right {
				width: 354rpx;
				height: 190rpx;
				position: absolute;
				bottom: 86rpx;
				right: 60rpx;
				box-sizing: border-box;

				.LocalTopicList-right-row {
					font-size: 26rpx;
					font-weight: 500;
					line-height: 40rpx;
					height: 40rpx;
					margin-bottom: 16rpx;
					color: #000;
					display: flex;
					align-items: center;

					image {
						margin-right: 6rpx;
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
						/* 防止图片被压缩 */
					}

					.LocalTopicList-right-row-content {
						flex: 1;
						/* 占据剩余空间 */
						overflow: hidden;
						/* 隐藏超出部分 */
						text-overflow: ellipsis;
						/* 超出显示省略号 */
						white-space: nowrap;
						/* 不换行 */
					}
				}
			}
		}


		// 街头热议
		.Street-discussion {
			margin-top: 260rpx;
			padding: 0rpx 27rpx 20rpx;

			.Street-discussion-header {
				height: 56rpx;
				line-height: 56rpx;
				display: flex;

				.Street-discussion-header-imageBox {
					width: 56rpx;
					height: 56rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.Street-discussion-header-title {
					color: #000;
					font-size: 30rpx;
					font-weight: 700;
					margin-left: 10rpx;
				}
			}

			.Street-discussion-content {
				.Street-discussion-content-imgBox {
					margin-right: 20rpx;
					margin-top: 20rpx;
				}

				.image-wrapper {
					position: relative;
					border-radius: 20rpx;
					width: 240rpx;
					height: 310rpx;
					overflow: hidden;
				}

				.image-wrapper image {
					width: 100%;
					height: 100%;
				}

				.Street-discussion-content-imgTitle {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					background: rgba(0, 0, 0, 0.6);
					/* 添加半透明背景提高可读性 */
					color: #fff;
					line-height: 30rpx;
					font-size: 22rpx;
					font-weight: 700;
					padding: 10rpx;
					box-sizing: border-box;
				}

			}
		}

		.Explore-local-community-header {
			height: 56rpx;
			line-height: 56rpx;
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			&.explore-sticky {
				position: fixed;
				top: 248rpx; // 或者根据头部高度调整
				left: 0;
				right: 0;
				z-index: 998;
				background: #fff;
				background-color: fff;

			}

			.Explore-local-community-header-left {
				display: flex;

				.Explore-local-community-header-imageBox {
					width: 56rpx;
					height: 56rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.Explore-local-community-header-title {
					color: #000;
					font-size: 30rpx;
					font-weight: 700;
					margin-left: 10rpx;
				}
			}

			.Explore-local-community-header-right {
				.switch-container {
					position: relative;
					display: flex;
					width: 240rpx; // 增加宽度以容纳3个选项
					height: 50rpx;
					background-color: #f0f0f0;
					border-radius: 25rpx;
					overflow: hidden;

					.switch-option {
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						font-weight: 500;
						color: #666;
						z-index: 2;
						transition: color 0.3s ease;

						&.active {
							color: #fff;
							font-weight: 700;
						}
					}

					.switch-slider {
						position: absolute;
						width: 33.33%; // 每个选项占1/3宽度
						height: 100%;
						background-color: #000;
						border-radius: 25rpx;
						transition: transform 0.3s ease;
						z-index: 1;

						&.slide-left {
							transform: translateX(0%); // 推荐位置
						}

						&.slide-center {
							transform: translateX(100%); // 最新位置
						}

						&.slide-right {
							transform: translateX(200%); // 最热位置
						}
					}
				}
			}
		}

		// 探索本地圈
		.Explore-local-community {
			padding: 20rpx 27rpx;
			height: 356rpx;



			.Explore-local-community-list {
				margin-top: 20rpx;
				box-sizing: border-box;
				box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
				padding: 20rpx;

				.Explore-local-community-list-content-top {
					display: flex;
					justify-content: space-between;
					height: 56rpx;
					line-height: 56rpx;

					.Explore-local-community-list-content-top-left {
						display: flex;

						.Explore-local-community-list-content-top-left-img {
							width: 50rpx;
							height: 50rpx;
						}

						.Explore-local-community-list-content-top-left-name {
							margin-left: 20rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #4D4D56;
						}
					}

					.Explore-local-community-list-content-top-right {
						display: flex;
						font-size: 22rpx;
						font-weight: 400;
						color: #4D4D56;

						.Explore-local-community-list-content-top-right-left {}

						.Explore-local-community-list-content-top-right-right {
							margin-left: 20rpx;
						}
					}
				}

				.Explore-local-community-list-content-middle {
					height: 164rpx;
					display: flex;
					justify-content: space-between;

					.Explore-local-community-list-content-middle-left {
						.Explore-local-community-list-content-middle-left-h1 {
							width: 366rpx;
							height: 80rpx;
							font-size: 30rpx;
							font-weight: 500;
							color: #000;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
							line-height: 40rpx;
							margin-top: 10rpx;
						}

						.Explore-local-community-list-content-middle-left-h2 {
							width: 366rpx;
							height: 60rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #787882;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							word-wrap: break-word;
							line-height: 30rpx;
							margin-top: 10rpx;

						}
					}

					.Explore-local-community-list-content-middle-right {
						width: 258rpx;
						height: 166rpx;

						image {
							border-radius: 20rpx;
							width: 258rpx;
							height: 166rpx;
						}
					}
				}

				.Explore-local-community-list-content-bottom {
					display: flex;
					justify-content: space-between;
					height: 60rpx;
					line-height: 60rpx;
					background-color: #FFF2F2;
					border-radius: 10rpx;
					margin: 20rpx 0 0;

					.Explore-local-community-list-content-bottom-left {
						flex: 1;
						display: flex;
						box-sizing: border-box;
						font-size: 22rpx;
						font-weight: 500;
						padding: 0 10rpx;
						min-width: 0;

						.Explore-local-community-list-content-bottom-left-first {
							width: 6rpx;
							height: 24rpx;
							margin: 0 10rpx;

							image {
								width: 6rpx;
								height: 24rpx;
							}
						}

						.Explore-local-community-list-content-bottom-left-second {
							display: flex;
							font-size: 20rpx;
							font-weight: 400;
							color: #4D4D56;
							flex-shrink: 0;

							.Explore-local-community-list-content-bottom-left-second-left {}

							.Explore-local-community-list-content-bottom-left-second-right {
								margin-left: 10rpx;

							}
						}

						.Explore-local-community-list-content-bottom-left-third {
							margin-left: 10rpx;
							flex: 1;
							/* 标题文本占据剩余空间 */
							font-size: 22rpx;
							font-weight: 500;
							color: #292930;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.Explore-local-community-list-content-bottom-right {
						height: 40rpx;
						line-height: 28rpx;
						display: flex;
						background-color: #FFE187;
						font-size: 20rpx;
						color: 000;
						margin: 10rpx;
						border-radius: 10rpx;
						padding: 10rpx;
						box-sizing: border-box;
						min-width: 110rpx;

						.onlookers {
							width: 28rpx;
							height: 28rpx;

							image {
								width: 28rpx;
								height: 28rpx;
							}
						}

					}
				}
			}

		}

	}
</style>